<template>
  <el-dialog
    v-model="drawer"
    :title="drawerProps.title"
    width="1500"
    @close="closeDialog"
    :close-on-click-modal="false"
  >
    <div class="protocolBody">
      <!-- <div class="userRight"> -->
      <div class="options">
        <el-button type="primary" @click="addUser">新增用户</el-button>
      </div>
      <el-table
        height="550px"
        :data="tableData2"
        style="width: 100%"
        class="Treetabls"
        :border="true"
      >
        <el-table-column prop="department_name" label="部门/公司" align="center" />
        <el-table-column prop="username" label="用户名" align="center" />
        <el-table-column prop="nick_name" label="姓名" align="center" />
        <!-- <el-table-column prop="robotnum" label="机器人个数" align="center" /> -->
        <el-table-column prop="role" label="角色" align="center" />
        <!-- <el-table-column prop="entry_date" label="入职日期" align="center" /> -->
        <!-- <el-table-column fixed="right" label="操作" width="200" align="center">
          <template #default="scope">
            <el-button
              type="primary"
              @click="edit(scope)"
              v-throttle="throttleClick"
              link
              :icon="EditPen"
            >
              编辑
            </el-button>
            <el-button
              type="primary"
              @click="deleted(scope)"
              v-throttle="throttleClick"
              link
              :icon="Delete"
            >
              删除
            </el-button>
          </template>
        </el-table-column> -->
      </el-table>

      <div class="pagination" v-if="false">
        <Pagination
          :pageTotal="pageable.total"
          :current="pageable.pageindex"
          :pageSize="pageable.pagesize"
          @currentChange="currentChange"
          @sizeChange="sizeChange"
        >
        </Pagination>
      </div>
      <!-- </div> -->
    </div>
    <AddUser ref="AddUsergRef" />
    <!-- <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="handleSubmit(ruleFormRef)">
            确定
          </el-button>
        </div>
      </template> -->
  </el-dialog>
</template>
<script setup lang="tsx" name="settingDialog">
import { ref } from "vue";
import AddUser from "./addUser.vue";
import { ElMessage } from "element-plus";
import { getuserApi, setbotsApi, setcustomerbotApi } from "@/api/modules/login";
import Pagination from "@/components/Pagination/Pagination.vue";
import { reactive } from "vue";
const drawer = ref(false);
const AddUsergRef = ref();
const tableData2 = ref([]);
const emits = defineEmits(["closeDialog"]);
const tableDataAlready = ref<any>([]);
const ruleForm = ref<any>({
  city: "",
  bots: [],
  type: 0,
  customerid: "",
});
const pageable = ref({
  //分页数据
  pageindex: 1, //当前页数
  pagesize: 30, //每页显示条数
  total: 0, //总条数
});

const addUser = () => {
  const pra = {
    titles: "新增用户",
    getList: getTableListInfo,
    departmentId: 0,
    company:drawerProps.value.data.orgid
    // treeInfo: currentTreeInfo.value,
    // userManagerList: userManagerList.value
  };
  AddUsergRef.value.acceptParams(pra);
};

/**
 * @description 每页条数改变
 * @param {Number} val 当前条数
 * @return void
 * */
const currentChange = (val: number) => {
  pageable.value.pageindex = val;
  const param = { ...sttrSearchParam, ...pageParam.value };
};
const getTableListInfo = async () => {
  try {
    const par = {
      keyword: "",
      department: "0",
      pageindex: 1,
      pagesize: 10,
    };

    console.log("huozue", par);
    const res: any = await getuserApi(par);

    console.log("获取用户", res);
    if (res.code == 200) {
      tableData2.value = res.data;
    }
  } catch (error) {}
};
/**
 * @description 每页显示几条数发生改变
 */
const sizeChange = (val: number) => {
  pageable.value.pageindex = 1;
  pageable.value.pagesize = val;
};
const rules = reactive<any>({
  city: [{ required: true, message: "请选择城市", trigger: "change" }],
});
const closeDialog = () => {
  console.log("关闭弹窗");
  emits("closeDialog");
};

const getAllBots = async () => {
  try {
    const res: any = await setbotsApi();
    console.log("res", res.data);
    if (res.code == 200) {
      tableDataAlready.value = res.data;
    }
  } catch (error) {}
};

const multipleElectionAlreadyPerson = (data: any) => {
  console.log("已选的", data);
  // arealyMultipleSelection.value = data;
  ruleForm.value.bots = data;
};
const handleSubmit = async (formEl: any) => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      if (ruleForm.value.bots.length > 10) {
        ElMessage.warning("此套餐最多选择10个机器人");
        return;
      }
      try {
        const bots = ruleForm.value.bots.map((item) => {
          return item.windows_id;
        });
        const par = {
          ...ruleForm.value,
          bots: bots,
          // customerid:drawerProps.value.data.company
          customerid: 0,
        };
        console.log("传参", par);
        const res: any = await setcustomerbotApi(par);
        console.log("res", res);
        if (res.code == 200) {
          ElMessage.success("分配成功");
          drawer.value = false;
          drawerProps.value.getTableList();
        }
      } catch (error) {}
    } else {
      console.log("error submit!", fields);
    }
  });
};

const cancel = () => {
  drawer.value = false;
};

const drawerProps = ref<any>({
  isView: false,
  title: "",
  row: {},
});

// 接收父组件传过来的参数
const acceptParams = async (params: any) => {
  // getProtocolList();
  // resetForm(ruleFormRef.value);
  drawerProps.value = params;
  drawer.value = true;

    console.log("yonghu", drawerProps.value);
  await getTableListInfo();

  // 判断有没有已经有数据了
  //   if (true) {
  //     ruleForm.value.city = cities.value[0].value;
  //     ruleForm.value.bots = [];
  //     ruleForm.value.type = 0;
  //     ruleForm.value.customerid = "";
  //   } else {
  //   }
};

defineExpose({
  acceptParams,
});
</script>
<style lang="scss" scoped>
.option-input {
  width: 100%;
  margin-bottom: 8px;
}
.bots {
  width: 100%;
  height: 300px;
  background-color: pink;
  //   overflow-y: scroll;
}
.protocolBody {
  height: 600px;
  //   background-color: pink;
  .Treetabls {
    margin-top: 10px;
  }
}

.el-form-item__label-wrap {
  margin-left: 0px !important;
}
.el-form-item--default {
  margin-bottom: 0px !important;
}
</style>
